<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>WebRTC | 前端开发团队</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
	<!-- 外联的CSS文件-->
	<link rel="stylesheet" href="../css/bootstrap.css"/> 
	<link rel="stylesheet" href="../css/bootstrap-responsive.css"/> 
	<link rel="stylesheet" href="../css/docs.css"/> 



	<script type="text/javascript" src="../js/SyntaxHighlighter/scripts/XRegExp.js"></script>
	<script type="text/javascript" src="../js/SyntaxHighlighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="../js/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
	<link type="text/css" rel="stylesheet" href="../js/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="Stylesheet" href="../js/SyntaxHighlighter/styles/shThemeDefault.css" />
	<script type="text/javascript">SyntaxHighlighter.all();</script>

	<style>
	body, input, button, textarea {
		font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti,sans-serif;
	  font-weight: normal;
	}
	div.prettyprint{
		border-radius: 4px 4px 4px 4px;
		display: block;
		font-size: 1em;
		line-height: 20px;
		margin:10px 0px;
	}
	.syntaxhighlighter .container:before, .container:after {
		content: none;
	}
	.syntaxhighlighter .gutter .line {
		 border-right: 0px solid #6CE26C !important
	}
	.syntaxhighlighter,.syntaxhighlighter .line.alt2,.syntaxhighlighter .line.alt1 {
		background: none !important;
	}
	</style> <!--内联 css 代码-->
    <link href="../css/prettify.css" rel="stylesheet">
    <link href="../css/bootstro.css" rel="stylesheet">
</head>

<body>
<!-- Navbar ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="../index.html">前端开发团队</a>
		
			<div class="nav-collapse collapse">
				<ul class="nav">
					<li class="active">
						<a href="../index.html">首页</a>
					</li>
					<li class="">
						<a class="bootstro" href="../getting-started.html">起步</a>
					</li>
					<li class="">
						<a class="bootstro" href="../scaffolding.html">脚手架</a>
					</li>
					<li class="">
						<a class="bootstro" href="../base-css.html">基本的CSS样式</a>
					</li>
					<li class="">
						<a class="bootstro" href="../components.html">组件</a>
					</li>
					<li class="">
						<a class="bootstro" href="../api.html">API手册</a>
					</li>
					<li class="">
						<a class="bootstro" href="../docs.html">经验交流</a>
					</li>
					<li class="">
						<a class="bootstro" href="../tools.html">工具</a>
					</li>
					<li class="">
						<a class="bootstro" href="../about.html">关于</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
    

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>WebRTC</h1>
    <p class="lead">网页实时通信,带你进入无插件的Web音视频通信时代。</p>
  </div>
</header>

  <div class="container">
    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix-top">
          <li><a href="#pSummary"><i class="icon-chevron-right"></i> 概述</a></li>
		  <li><a href="#pFramework"><i class="icon-chevron-right"></i> 系统架构</a></li>
          <li><a href="#pBrowser"><i class="icon-chevron-right"></i> 浏览器支持</a></li>
		  <li><a href="#pVedioAndAudio"><i class="icon-chevron-right"></i> 视频/音频</a></li>
		  <li><a href="#pMedia"><i class="icon-chevron-right"></i> 媒体流 MediaStream</a></li>
		  <li><a href="#p6"><i class="icon-chevron-right"></i> 网络通讯</a></li>
		  <li><a href="#p7"><i class="icon-chevron-right"></i> PeerConnection 实现</a></li>
          <li><a href="#pRreference"><i class="icon-chevron-right"></i> 参考资料</a></li>


        </ul>
      </div>
      <div class="span9">
			<section id="pSummary">
					  <div class="page-header">
						<h1>概述</h1>
					  </div>
					  <p>WebRTC（Web Real-Time Communication）项目的最终目的主要是让Web开发者能够基于浏览器（Chrome\FireFox\...）通过简单的JavaScript API 轻易快捷开发出丰富的实时通信（RTC）功能的应用。</p>
			</section>

			<section id="pFramework">
					  <div class="page-header">
						<h1>系统架构</h1>
					  </div>
					  <p><img src="webRTC/images/1.png" width="650" height="436" alt="" /></p>


					  <p>架构图颜色标识说明：</p>
					  <ul>
						<li>紫色部分是Web开发者API层 (<a href="http://www.w3.org/TR/webrtc/" target="_blank">http://www.w3.org/TR/webrtc/</a>)</li>
						<li>蓝色实线部分是面向浏览器厂商的API层</li>
						<li>蓝色虚线部分浏览器厂商可以自定义实现</li>
					  </ul>

					  <p>WebRTC三个组成部分：</p>
					  <table class="table table-bordered">
							<tr><td>部分组成</td><td>说明</td></tr>
							<tr><td>MediaStream</td><td>来自本地的音频视频流，或者来自远端浏览器的音频视频流</td></tr>
							<tr><td>PeerConnection</td><td>负责客户端信令处理(音频或视频通话，加密和带宽管理)，连接建立，媒体传输等任务</td></tr>
							<tr><td>DataChannel</td><td>采用点对点传输，对等通信的通用数据</td></tr>
					</table>
			</section>

			<section id="pBrowser">
					  <div class="page-header">
						<h1>浏览器支持</h1>
					  </div>
					  <h2>浏览器支持情况</h2>

					    <table class="table table-bordered">
							<tr><td>浏览器</td><td>测试版本</td><td>获取最版</td><td>演示</td></tr>
							<tr><td>Chrome 25+</td><td>29</td><td><a href="http://chrome.google.com/" target="_blank">立即获取</a></td><td>-</td></tr>
							<tr><td>Firefox 23+</td><td>24</td><td><a href="http://firefox.com.cn/" target="_blank">立即获取</a></td><td>
							<a href="http://mozilla.github.io/webrtc-landing/" target="_blank">http://mozilla.github.io/webrtc-landing/</a></td></tr>
							<tr><td>IE</td><td>-</td><td>-</td><td>-</td></tr>
						</table>

						<h2>兼容性</h2>
						<table class="table table-bordered">
							<tr><td>W3C标准接口</td><td>Chrome</td><td>Firefox</td><td>IE</td></tr>
							<tr><td>MediaStream/getUserMedia</td><td>webkitGetUserMedia</td><td>mozGetUserMedia</td><td>msGetUserMedia</td></tr>
							<tr><td>RTCPeerConnection</td><td>webkitRTCPeerConnection</td><td>mozRTCPeerConnection</td><td>-</td></tr>
							<tr><td>RTCDataChannel</td><td>-</td><td>-</td><td>-</td></tr>
						</table>

						<p>* mozGetUserMedia 需要在about:config配置界面中设置media.navigator.enabled为"true"</p>
						<p>* mozRTCPeerConnection 需要在about:config配置界面中设置media.peerconnection.enabled为"true"</p>
			</section>

			<section id="pVedioAndAudio">
					  <div class="page-header">
						<h1>视频/音频</h1>
					  </div>
					  <p>WebRTC视频与音频的实现 借助于浏览器内置的 video 与 audio 标签来实现</p>

					  <h2>视频资料</h2>
					  <p>video 元素支持三种视频格式：</p>
						<table class="table table-bordered">
						<tbody><tr>
						<th>格式</th>
						<th style="width:16%">IE</th>
						<th style="width:16%">Firefox</th>
						<th style="width:16%">Opera</th>
						<th style="width:16%">Chrome</th>
						<th style="width:16%">Safari</th>
						</tr>

						<tr>
						<td>Ogg</td>
						<td>No</td>
						<td>3.5+</td>
						<td>10.5+</td>
						<td>5.0+</td>
						<td>No</td>
						</tr>

						<tr>
						<td>MPEG 4</td>
						<td>9.0+</td>
						<td>No</td>
						<td>No</td>
						<td>5.0+</td>
						<td>3.0+</td>
						</tr>

						<tr>
						<td>WebM</td>
						<td>No</td>
						<td>4.0+</td>
						<td>10.6+</td>
						<td>6.0+</td>
						<td>No</td>
						</tr>
						</tbody></table>

					  <ul>
						<li>Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件</li>
						<li>MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件</li>
						<li>WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件</li>
					  </ul>
					  <p><a href="webRTC/html5_video.html" target="_blank" class="btn btn-large btn-primary">视频Demo</a></p>
					  <p><a href="http://www.w3school.com.cn/html5/html_5_video.asp" target="_blank">更多视频资料</a></p>

					  <h2>音频资料</h2>
					   <p>audio 元素支持三种音频格式：</p>

						<table class="table table-bordered">
						<tbody><tr>
						<th>&nbsp;</th>
						<th style="width:16%;">IE 9</th>
						<th style="width:16%;">Firefox 3.5</th>
						<th style="width:16%;">Opera 10.5</th>
						<th style="width:16%;">Chrome 3.0</th>
						<th style="width:16%;">Safari 3.0</th>
						</tr>

						<tr>
						<td>Ogg Vorbis</td>
						<td>&nbsp;</td>
						<td>√</td>
						<td>√</td>
						<td>√</td>
						<td>&nbsp;</td>
						</tr>

						<tr>
						<td>MP3</td>
						<td>√</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>√</td>
						<td>√</td>
						</tr>

						<tr>
						<td>Wav</td>
						<td>&nbsp;</td>
						<td>√</td>
						<td>√</td>
						<td>&nbsp;</td>
						<td>√</td>
						</tr>
						</tbody></table>

						<p><a href="webRTC/html5_audio.html" target="_blank" class="btn btn-large btn-primary">音频Demo</a>
						<p><a href="http://www.w3school.com.cn/html5/html_5_audio.asp" target="_blank">更多音频资料</a></p>
					 
						<p><span class="label label-info">注意</span> 关于OPUS格式，据说Firefox15+与chrome27Beta支持，经过测试仅Firefox支持，Chrome 29 也并未支持这个格式。<a href="http://caniuse.com/opus" target="_blank">查看详情</a>，audio 支持播放的音频格式 在 video 中也支持。</p>

					  <h2>音频/视频常用属性方法</h2>

					   <ul>
					   <li>Media.error; //null:正常</li> 
					   <li>Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效 </li> 
					   <li>Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源</li>
					    <li>Media.play(); //播放</li>
						<li>Media.pause(); //暂停</li>
						<li>Media.src = value; //返回或设置当前资源的URL </li>
						<li>Media.controls;//是否有默认控制条 </li>
						<li>Media.volume = value; //音量 0-1</li>
						<li>Media.muted = value;  //静音 </li>
						
					  </ul>
					  <p><a href="http://www.douban.com/note/158621500/" target="_blank">更多属性方法</a></p>
					
					  <p><a href="http://www.w3.org/2010/05/video/mediaevents.html" target="_blank" class="btn btn-large btn-primary">查看完整Demo</a></p>
			</section>

			<section id="pMedia">
					  <div class="page-header">
						<h1>媒体流 MediaStream</h1>
					  </div>
					  <h2>理解2个浏览器对象</h2>	
					  <table class="table table-bordered">
						<tr><td>对象</td><td>说明</td><td>兼容性</td></tr>
						<tr><td>window.url</td><td>返回一个URL对象提供静态方法，用于创建和管理对象的URL</td><td>Chrome9+/Firefox19+/IE10+</td></tr>
						<tr><td>navigator.getUserMedia</td><td>提示用户允许使用媒体设备如照相机或麦克风。如果用户提供的许可，successcallback是调用应用程序在调用localmediastream对象作为参数。</td><td>Chrome21+/Firefox20+</td></tr>
					  </table>
					  <h3>window.URL</h3>
					  <p><code>window.URL.createObjectURL(blob);</code></p>
					  <p>创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.</p>
					  <p><code>window.URL.revokeObjectURL(objectURL);</code></p>
					  <p>不需要使用这个对象URL的时候,释放它可以让浏览器释放一些相关的内存和资源占用.</p>

					  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/window.URL" target="_blank">了解更多</a></p>
					  <p>出处省略1000字...</p>
					  <h3>navigator.getUserMedia</h3>
					  <p>语法</p>
					  <p><code>navigator.getUserMedia ( constraints, successCallback, errorCallback );</code></p>
					  <p>参数</p>
					  <table class="table table-bordered">
						<tr><td>constraints</td><td>{video: true,audio: true }</td></tr>
						<tr><td>successCallback</td><td>function(localMediaStream) {}</td></tr>
						<tr><td>errorCallback</td><td>function(err){}</td></tr>
					  </table>
					  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia" target="_blank">了解更多</a></p>
					  <h2>调用本地音视频</h2>
					  <p>successCallback 成功回调函数接收一个参数(MediaStream)，包含音视频流，我们需要将该音视频流发送到我们的&lt;video&gt;元素，但是浏览器之间调用的方式有些差异：</p>
					  <ul>
					   <li>Firefox使用mozSrcObject的属性，而Opera和Chrome使用src属性。</li> 
					   <li>Chrome使用createObjectURL的方法，而Firefox和Opera直接发送视频流。</li> 
					  </ul>
	
					  <p>范例</p>
					  <div class="prettyprint linenums">
					  <script type="syntaxhighlighter" class="brush: js; ">
function successCallback(mediaStream) {
	if (video.mozSrcObject !== undefined) {
        video.mozSrcObject = mediaStream;
    } else {
        video.src = (window.URL && window.URL.createObjectURL(mediaStream)) || mediaStream;
    };
    video.play();
}
					  </script>
					  </div>
					  <p>
							<a href="webRTC/html5_media.html" target="_blank" class="btn btn-large btn-primary">查看简单Demo</a>
							<a href="webRTC/face-detection.html" target="_blank" class="btn btn-large btn-primary">查看人脸识别Demo</a>
					  </p>
					  <p class="text-info">以下为个人理解</p>
					  <p>参数MediaStream对象中包含MediaStreamTrack类型的数组，我们可以通过 <code>getAudioTracks()</code> 和 <code>getVideoTracks()</code> 方法分别获取到 audioTrack 与 videoTrack 的数组对象。每个MediaStreamTrack都有一个唯一的标识。</p>
					  <ul>
					   <li>如果 audioTrack 返回空数组，表示没有音频。多个数组则可能表示不同的频道输入，比如左声道，右声道等等</li>
					   <li>如果 videoTrack 返回空数组表示没有视频，多个可能表示多个视频输入，比如前后摄像头设备等等</li> 
					  </ul>
					  <p>PS:目前了解 <code>getUserMedia</code> 接口，应该不能通过接口调用摄像头/音频的输入（输入音量等等）</p>
					  <p><a href=" https://hacks.mozilla.org/2013/02/cross-browser-camera-capture-with-getusermediawebrtc/" target="_blank">了解更多 getUserMedia</a></p>
					  <p><a href="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API" target="_blank">了解更多 MediaStream_API</a></p>
					 
					  
			</section>

			<section id="p6">
					  <div class="page-header">
						<h1>网络通讯</h1>
					  </div>
					  <p>WebRTC 除了使用 RTCPeerConnection 在客户端(Peer)之间传输数据流(MediaStream)，还需要一种机制来协调通信和控制消息的发送，这种机制我们称为信令(signaling)。信令实现的方法和协议 WebRTC 没有指定，信令并不是 RTCPeerConnection API 的一部分。</p>
					 
					  <p> WebRTC 应用的开发者可以采用合适他们的协议，比如 SIP、XMPP 等等，采用其它合适的双向通讯通道，比如 WebSocket、XMLHttpResuest（XHR）、Google Channel API，来完成信令任务。在 <a href="http://apprtc.appspot.com" target="_blank">apprtc.appspot.com</a> 的测试例子中，就是通过 XHR 和 Google Channel API 作为信令传递机制。在 codelab 中我们采用 Socket.io 运行在Node 服务器上 </p>

					  <p>信令主要有三种类型：</p>
					  <ul>
						<li>会话(Session)控制消息：用于消息的初始化与结束和错误报告</li>
						<li>网络配置：用于远程链接的本机的IP与端口</li>
						<li>媒体功能：什么样的编码器和分辨率可以在浏览器上处理显示</li>
					  </ul>

					  <p>启动一个 WebRTC 会话，WebRTC 需要以下几个信息：</p>
					  <ul>
						<li>本地客户端的配置信息</li>
						<li>远程客户端的配置信息</li>
						<li>远程参与建立P2P连接的信息：主要是 IP 和端口</li>
					  </ul>
					  
					  <p>客户端配置信息叫做 Session Description，结构必须符合 Session Description Protocol(SDP，<a href="http://tools.ietf.org/html/rfc4566" target="_blank">http://tools.ietf.org/html/rfc4566</a>)的要求。</p>

					  <p>信令的处理过程大致如下：</p>
					  <ul>
						<li>1.呼叫方发送 offer；</li>
						<li>2.被呼叫方接受这个 offer；</li>
						<li>3.被呼叫方发送 answer；</li>
						<li>4.呼叫方接受 answer。</li>
					  </ul>
					  
					  <p>上述信令处理过程叫做 JSEP（JavaScript Session Establishment Protocol，规范为 <a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-jsep/" target="_blank">http://datatracker.ietf.org/doc/draft-ietf-rtcweb-jsep/</a>）。JSEP 在最新版本的 chromium 里有实现参考。</p>

					  <h2>双向通讯通道</h2>
					  <p>实现 WebRTC 浏览器与服务器交互需要使用双向的通道进行信令信息的传递，这里我们采用 WebSocket 作为信令的传输通道。</p>
					  <p><a href="websocket.html" target="_blank" class="btn btn-large btn-primary">了解 WebSocket </a></p>
	</section>
    <section id="p7">

					  <div class="page-header">
						<h1>PeerConnection 实现</h1>
					  </div>
					   <p>PeerConnection 参与了 WebRTC 应用开发三个主要模块：发起连接，接受连接和中止连接。</p>
					   <h3>发起连接</h3>
					    <img src="images/rtc_offer.png" width="599" height="478" alt="" />

					  <div class="prettyprint linenums">
					  <script type="syntaxhighlighter" class="brush: js; ">
var peerConnection = new RTCPeerConnection(server); //创建一个PeerConnection

peerConnection.addStream(localStream); //添加本地视频信息

peerConnection.createOffer(function(offer){
	peerConnection.setLocalDescription(offer);//设定本地的SDP信息
	//TODO:发送Offer信息 通过服务端到对方接受连接的浏览器
	//..........
	//..........
},failed/*创建失败回调函数*/); 

peerConnection.onaddStream(function(event){
	remoteStream = event.stream;  //获取远端视频信息的回调
}); 

//假设从服务器接收到  answer信息
peerConnection.setRemoteDescription(answer);//设定远端的SDP信息
					  </script>
					  </div>


						<h3>接受(应答)连接</h3>
						<img src="images/rtc_answer.png" width="571" height="457" alt="" />

					  <div class="prettyprint linenums">
					  <script type="syntaxhighlighter" class="brush: js; ">
//假设从服务器接收到 offer信息
var peerConnection = new RTCPeerConnection(server); //创建一个PeerConnection

peerConnection.addStream(localStream); //添加本地视频信息

peerConnection.createAnswer(function(answer){
	peerConnection.setLocalDescription(answer);//设定本地的SDP信息
	peerConnection.setRemoteDescription(offer);//设定远端的SDP信息
	//TODO:发送answer信息 通过服务端到对方发起连接的浏览器
	//..........
	//..........
	
},failed/*创建失败回调函数*/); 

peerConnection.onaddStream(function(event){
	remoteStream = event.stream;  //获取远端视频信息的回调
}); 
					  </script>
					  </div>
						<h3>中止连接</h3>
						<img src="images/rtc_close.png" width="590" height="378" alt="" />
						 <div class="prettyprint linenums">
					  <script type="syntaxhighlighter" class="brush: js; ">
//直接断开链接
peerConnection.close();
				      </script>
					  </div>

					  <p><a href="webRTC/html5_video_pc.html" target="_blank" class="btn btn-large btn-primary">本地演示 RTCPeerConnection </a></p>
					  <p>以上范例中可以看出 Firefox 与 Chrome 传递 SDP 信息结构是完全不同的</p>
					  <p>Firefox Offer 的SDP消息描述</p>
					  <div class="prettyprint linenums">
					  <script type="syntaxhighlighter" class="brush: js; ">
vv=0
o=Mozilla-SIPUA-24.0 308 0 IN IP4 0.0.0.0
s=SIP Call
t=0 0
a=ice-ufrag:431801d8
a=ice-pwd:b8eea5dfe869f0f06445e19245a2e868
a=fingerprint:sha-256 95:D3:40:BA:E3:84:E3:0E:01:74:90:F3:07:19:07:9D:31:04:A8:25:03:02:36:A0:1C:D6:A9:FD:36:12:D3:BC
m=audio 63967 RTP/SAVPF 109 0 8 101
c=IN IP4 221.224.36.247
a=rtpmap:109 opus/48000/2
a=ptime:20
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
a=rtpmap:101 telephone-event/8000
a=fmtp:101 0-15
a=sendrecv
a=candidate:0 1 UDP 2111832319 10.127.0.1 63967 typ host
a=candidate:1 1 UDP 1692467199 221.224.36.247 63967 typ srflx raddr 10.127.0.1 rport 63967
a=candidate:2 1 UDP 2111766783 192.168.56.1 63968 typ host
a=candidate:4 1 UDP 2111701247 169.254.101.15 63969 typ host
a=candidate:0 2 UDP 2111832318 10.127.0.1 63970 typ host
a=candidate:1 2 UDP 1692467198 221.224.36.247 63970 typ srflx raddr 10.127.0.1 rport 63970
a=candidate:2 2 UDP 2111766782 192.168.56.1 63971 typ host
a=candidate:4 2 UDP 2111701246 169.254.101.15 63972 typ host
m=video 63973 RTP/SAVPF 120
c=IN IP4 221.224.36.247
a=rtpmap:120 VP8/90000
a=sendrecv
a=candidate:0 1 UDP 2111832319 10.127.0.1 63973 typ host
a=candidate:1 1 UDP 1692467199 221.224.36.247 63973 typ srflx raddr 10.127.0.1 rport 63973
a=candidate:2 1 UDP 2111766783 192.168.56.1 63974 typ host
a=candidate:4 1 UDP 2111701247 169.254.101.15 63975 typ host
a=candidate:0 2 UDP 2111832318 10.127.0.1 63976 typ host
a=candidate:1 2 UDP 1692467198 221.224.36.247 63976 typ srflx raddr 10.127.0.1 rport 63976
a=candidate:2 2 UDP 2111766782 192.168.56.1 63977 typ host
a=candidate:4 2 UDP 2111701246 169.254.101.15 63978 typ host
a=rtcp-fb:* nack
a=rtcp-fb:* ccm fir

				      </script>
					  </div>

					  <p><a href="http://10.127.0.1:8888/websocketDemo/webRTC_R.html" target="_blank" class="btn btn-large btn-primary">点对点视频通话</a></p>
					  <p>点对点视频通话服务器是开发环境，不保证每次都开启，需要看效果请联系孔纯</p>
	


					 
					 

			</section>


			<section id="pRreference">
					  <div class="page-header">
						<h1>参考资料</h1>
					  </div>
					  <p><a 
					  href="http://baike.baidu.com/link?url=sg8ug4Z4V3evY6YUTlnuXsFQl5zvfzcyDIBAXc6PPAtZNPfPsiYHqflflWOc3Wo8pQ_3qDmnVsZjfAwfaIwQmq" target="_blank">什么是WebRTC</a></p>
					  <p><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/" target="_blank">WebRTC起步教程</a></p>
					  <p><a href="" target="_blank"></a></p>
			</section>


      </div>
    </div>

  </div>

    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>苏州科达科技股份有限公司 - 前端开发团队</p>
      </div>
    </footer>


</body>
</html>